<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <meta name="twitter:site" content="@metroui">
    <meta name="twitter:creator" content="@pimenov_sergey">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Metro 4 Components Library">
    <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">

    <meta property="og:url" content="https://metroui.org.ua/v4/index.html">
    <meta property="og:title" content="Metro 4 Components Library">
    <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins  .">
    <meta property="og:type" content="website">
    <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="968">
    <meta property="og:image:height" content="504">

    <meta name="author" content="Sergey Pimenov">
    <meta name="description" content="Allow users to easily view and set ratings. The most popular HTML, CSS, and JS library in Metro style.">
    <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">

    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="icon" href="favicon.ico" type="image/x-icon">

    <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
    <link href="highlight/styles/github.css" rel="stylesheet">
    <link href="docsearch/docsearch.min.css" rel="stylesheet">
    <link href="css/site.css" rel="stylesheet">

    <title>Rating - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">

<header data-role="html-container" data-insert-mode="replace" data-html-source="header.html"></header>

<div data-role="html-container" data-insert-mode="replace" data-html-source="sidebar-menu.html"></div>

<div class="container-fluid docs-content">

    <div class="row flex-xl-nowrap">

            <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
                <h5>Table of contents</h5>
                <hr/>
                <ul class="toc-nav">
                    <li class="toc-entry"><a href="#">Rating</a></li>
                    <li class="toc-entry"><a href="#_rating_about">About</a></li>
                    <li class="toc-entry">
                        <a href="#_rating_options">Options</a>
                        <ul>
                            <li class="toc-entry"><a href="#_rating_options_stars">Stars count</a></li>
                            <li class="toc-entry"><a href="#_rating_options_values">Value &amp; Values</a></li>
                            <li class="toc-entry"><a href="#_rating_options_message">Message</a></li>
                            <li class="toc-entry"><a href="#_rating_options_colors">Colors</a></li>
                            <li class="toc-entry"><a href="#_rating_options_static">Static rating</a></li>
                        </ul>
                    </li>
                    <li class="toc-entry"><a href="#_rating_events">Events</a></li>
                    <li class="toc-entry"><a href="#_rating_methods">Methods</a></li>
                    <li class="toc-entry"><a href="#_rating_customize">Customize</a></li>
                </ul>

            </div>

            <main class="cell-xl-10 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
                <div class="place-right d-none d-block-lg" style="width: 200px;">
                    <img src="images/logo.png" class="w-100" alt="">
                </div>

                <h1>Rating</h1>
                <p class="text-leader">
                    Allow users to easily view and set ratings that reflect degrees of satisfaction with content and services.
                </p>

                <!-- ads-html -->

                <h3 id="_rating_about">About</h3>
                <p>
                    Allow users to easily view and set ratings that reflect degrees of satisfaction with content and services.
                    The <code>rating</code> control has several great features that provide flexibility and customization.
                    To create <code>rating</code>, add role <code>rating</code> with attribute <code>data-role</code> to <code>input</code> element.
                </p>
                <div class="example">
                    <input data-role="rating">
                </div>
                <pre><code class="html">
                    &lt;input data-role="rating"&gt;
                </code></pre>

                <h3 id="_rating_options">Options</h3>
                <p>
                    The <code>rating</code> component has a number of options to setup it.
                </p>

                <h4 id="_rating_options_stars">Stars count</h4>
                <p>
                    By default the rating is displayed with five stars.
                    You can set your own number of stars with attribute <code>data-stars="..."</code>.
                    Value for this attribute must be a valid integer value.
                </p>
                <div class="example">
                    <input data-role="rating" data-stars="10">
                </div>
                <pre><code class="html">
                    &lt;input data-role="rating" data-stars="10"&gt;
                </code></pre>

                <h4 id="_rating_options_values">Value, values and round values</h4>
                <p>
                    You can set rated value with attribute <code>data-value="..."</code>.
                    Value for this attribute must be a valid number value and less or equal of count of stars.
                </p>
                <div class="example">
                    <input data-role="rating" data-value="3">
                </div>
                <pre><code class="html">
                    &lt;input data-role="rating" data-value="3"&gt;
                </code></pre>
                <p>
                    If your value is a float, you can use special attribute <code>data-round-func="round|ceil|floor"</code> to set round function.
                    By default, used <code>round</code> function.
                </p>
                <div class="example">
                    <div class="row">
                        <div class="cell-md-4">
                            <p class="text-bold">round</p>
                            <input data-role="rating" data-value="3.7" data-round-func="round">
                        </div>
                        <div class="cell-md-4">
                            <p class="text-bold">ceil</p>
                            <input data-role="rating" data-value="3.7" data-round-func="ceil">
                        </div>
                        <div class="cell-md-4">
                            <p class="text-bold">floor</p>
                            <input data-role="rating" data-value="3.7" data-round-func="floor">
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;input data-role="rating" data-value="3.7" data-round-func="round"&gt;
                    &lt;input data-role="rating" data-value="3.7" data-round-func="ceil"&gt;
                    &lt;input data-role="rating" data-value="3.7" data-round-func="floor"&gt;
                </code></pre>
                <p>
                    Each star has associated value, to determine the ranking. By default, this number is from 1 to the number of stars.
                    You can set own set of values with attribute <code>data-values="..."</code>. Use <strong>comma separated</strong> string to set value for this attribute.
                </p>
                <div class="example">
                    <p class="text-bold mb-4">
                        Click on star to view associated value.
                    </p>
                    <div class="row">
                        <div class="cell-md-6">
                            <input data-role="rating" data-values="0.1, 0.2, 0.3, 0.4, 0.5" onchange="$('#input-for-values-number').val(this.value)">
                        </div>
                        <div class="cell-md-6">
                            <input data-role="input" id="input-for-values-number" readonly data-clear-button="false">
                        </div>
                    </div>
                    <div class="row mt-2">
                        <div class="cell-md-6">
                            <input data-role="rating" data-values="A, B, C, D, E" onchange="$('#input-for-values-alpha').val(this.value)">
                        </div>
                        <div class="cell-md-6">
                            <input data-role="input" id="input-for-values-alpha" readonly data-clear-button="false">
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;input data-role="rating" data-values="0.1, 0.2, 0.3, 0.4, 0.5"&gt;
                    &lt;input data-role="rating" data-values="A, B, C, D, E"&gt;
                </code></pre>

                <h4 id="_rating_options_message">Message</h4>
                <p>
                    With attribute <code>data-message="..."</code> you can set additional information field for <code>rating</code>.
                </p>
                <div class="example">
                    <input data-role="rating" data-value="3" data-message="(3856)">
                </div>
                <pre><code class="html">
                    &lt;input data-role="rating" data-value="3" data-message="(3856)"&gt;
                </code></pre>

                <h4 id="_rating_options_colors">Colors</h4>
                <p>
                    You can set own colors for rating with attributes <code>data-star-color="..."</code> and <code>data-stared-color="..."</code>.
                    Value for this attribute must be valid <strong>color hex value</strong> or Metro 4 color name. A color names a defined in <code>Metro.utils</code>, you can see all names in example below.
                </p>
                <div class="example">
                    <div class="row">
                        <div class="cell-md-3">
                            <input data-role="rating" data-value="3" data-star-color="cyan" data-stared-color="pink">
                        </div>
                        <div class="cell-md-3">
                            <input data-role="rating" data-value="3" data-star-color="pink" data-stared-color="cyan">
                        </div>
                        <div class="cell-md-3">
                            <input data-role="rating" data-value="3" data-star-color="green" data-stared-color="red">
                        </div>
                        <div class="cell-md-3">
                            <input data-role="rating" data-value="3" data-star-color="yellow" data-stared-color="yellow">
                        </div>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;input data-role="rating"
                        data-value="3"
                        data-star-color="cyan"
                        data-stared-color="pink"&gt;
                </code></pre>
                <pre><code>
                        colors: {
                            lime: '#a4c400',
                            green: '#60a917',
                            emerald: '#008a00',
                            blue: '#00AFF0',
                            teal: '#00aba9',
                            cyan: '#1ba1e2',
                            cobalt: '#0050ef',
                            indigo: '#6a00ff',
                            violet: '#aa00ff',
                            pink: '#dc4fad',
                            magenta: '#d80073',
                            crimson: '#a20025',
                            red: '#CE352C',
                            orange: '#fa6800',
                            amber: '#f0a30a',
                            yellow: '#fff000',
                            brown: '#825a2c',
                            olive: '#6d8764',
                            steel: '#647687',
                            mauve: '#76608a',
                            taupe: '#87794e'
                        }
                </code></pre>

                <h4 id="_rating_options_static">Static rating</h4>
                <p>
                    If you need create static rating, use attribute <code>data-static="true"</code> to set it.
                </p>
                <div class="example">
                    <label>value=3</label>
                    <input data-role="rating" data-value="3" data-message="(3856)" data-static="true" class="d-block">

                    <label>value=3.5</label>
                    <input data-role="rating" data-value="3.5" data-message="(3856)" data-static="true" class="d-block" data-stared-color="cyan">
                </div>
                <pre><code class="html">
                    &lt;input data-role="rating"
                        data-value="3"
                        data-message="(3856)"
                        data-static="true"&gt;
                </code></pre>

                <!-- ads-html -->

                <h3 id="_rating_events">Events</h3>
                <p>
                    When <code>rating</code> works, it generate the number of events. You can use callbacks for this events to interact with it.
                </p>
                <table class="table cell-border table-border options-table">
                    <thead>
                    <tr>
                        <th>Event</th>
                        <th>Data</th>
                        <th>Desc</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><code>onStarClick(value, star, element)</code></td>
                        <td><code>data-on-star-click</code></td>
                        <td>Fired when use click on the star on the not static rating</td>
                    </tr>
                    <tr>
                        <td><code>onRatingCreate(element)</code></td>
                        <td><code>data-on-rating-create</code></td>
                        <td>Fired when the rating was created.</td>
                    </tr>
                    </tbody>
                </table>
                <div class="example">
                    <input id="rating-events" data-role="rating" data-on-star-click="alert('User rated this with value ' + arguments[0])">
                </div>
                <pre><code class="html">
                    &lt;input id="rating-events"
                        data-role="rating"
                        data-on-star-click="
                            alert('User rated this with value ' + arguments[0])
                        "&gt;
                </code></pre>

                <h3 id="_rating_methods">Methods</h3>
                <p>
                    Rating has the number of methods to interact with it.
                </p>
                <table class="table cell-border table-border options-table">
                    <thead>
                    <tr>
                        <th>Method</th>
                        <th>Desc</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td><code>val()</code></td>
                        <td>Get current rating value</td>
                    </tr>
                    <tr>
                        <td><code>val(val)</code></td>
                        <td>Set rating value</td>
                    </tr>
                    <tr>
                        <td><code>msg(m)</code></td>
                        <td>Set rating info message</td>
                    </tr>
                    <tr>
                        <td><code>static(mode)</code></td>
                        <td>Set rating mode: static when true or not when false</td>
                    </tr>
                    </tbody>
                </table>
                <div class="example">
                    <input data-role="rating" id="rating-methods" data-message="Please rate">
                    <div class="mt-2">
                        <button class="button" onclick="
                            var v = $.random(1, 5);
                            var r = $('#rating-methods').data('rating');
                            r.val(v).msg('Your rate is: ' + v);
                        ">Click me for rate</button>
                    </div>
                </div>
                <pre><code class="html">
                    &lt;input data-role="rating" id="rating-methods" data-message="Please rate"&gt;
                    &lt;div&gt;
                        &lt;button class="button" onclick="
                            var v = $.random(1, 5);
                            var r = $('#rating-methods').data('rating');
                            r.val(v).msg('Your rate is: ' + v);
                        "&gt;Click me for rate&lt;/button&gt;
                    &lt;/div&gt;
                </code></pre>

                <h3 id="_rating_customize">Customize</h3>
                <p>
                    You can customize cube component. For change cube visual style use attributes:
                        <code>data-cls-rating</code> - additional class for rating component,
                        <code>data-cls-stars</code> - additional class for stars list,
                        <code>data-cls-result</code> - additional class for message field.
                    Use these attributes to set additional classes to cube elements.
                </p>
            </main>
        </div>

    </div>

    <script src="docsearch/docsearch.min.js"></script>


    <script src="metro/js/metro.js?ver=@@b-version"></script>
    <script src="highlight/highlight.pack.js"></script>
    <script src="js/clipboard.min.js"></script>
    <script src="js/site.js"></script>
    <!-- ads-script -->
    <!-- ga-script -->
    <!-- hit-ua -->
</body>
</html>